import React, { useEffect, useState } from 'react'
import { ResultPage, Card, Input, Button, Grid, InfiniteScroll } from 'antd-mobile'
import request from '../../api/request'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './index.module.css'
import { Collapse } from 'antd-mobile'

function List() {
    let navtion = useNavigate()
    let [qs] = useSearchParams()
    console.log(qs);
    const start = qs.get('start')
    console.log(start);
    const end = qs.get('end')
    console.log(end);
    const date = qs.get('date')
    console.log(date);
    const [listt, setListt] = useState([])
    const [page, setPage] = useState(0)
    const [hasMore, setHasMore] = useState(true)
    const getlistt = async () => {
        const res = await request.get('/api/list', {

        })
        console.log(res);
        const { code, data } = res.data
        if (code == 200) {
            setListt([...listt, ...data])
        }
        if (data.length == 0) {
            setPage(data)
        }
    }
    useEffect(() => {
        getlistt()
    }, [])

    const deti = () => {
        navtion('/detil')
    }
    return (
        <div>
         <div className={styles.heartdd}>
           <div>
             &emsp;&emsp;&emsp;&emsp;  <h3> 合肥-南京'</h3>
            <br></br>
            <br></br>
            <br></br>
           </div>
            <br></br>
         

        <div className={styles.yss}>前一天&emsp;&emsp;&emsp;&emsp;&emsp;  <Button>05/13&emsp;周一</Button> &emsp;&emsp;    后一天</div>

              
      
            </div>
            <div>
                {
                    listt.length > 0 && listt.map((item, index) => {
                        return <div key={index} className={styles.xr}>
                            <Grid columns={3} gap={8}  >
                                <Grid.Item >
                                    <div className={styles['grid-demo-item-block']} onClick={() => deti()}>北京</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>广州</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>商务座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>一等座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>二等座</div>
                                </Grid.Item>
                            </Grid>

                            <Grid columns={3} gap={8}>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>北京</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>广州</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>商务座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>一等座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>二等座</div>
                                </Grid.Item>
                            </Grid>
                            <Grid columns={3} gap={8}>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>北京</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>广州</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>商务座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>一等座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>二等座</div>
                                </Grid.Item>
                            </Grid>
                            <Collapse defaultActiveKey={['1']} title='以下为普通列车'>
                                <Collapse.Panel key='1' title='收起'>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>
                                    <Grid columns={3} gap={8}>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>北京</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>广州</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>商务座</div>
                                        </Grid.Item>
                                        <Grid columns={3} gap={8}>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>北京</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>广州</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>商务座</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>一等座</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>二等座</div>
                                            </Grid.Item>
                                        </Grid>
                                        <Grid columns={3} gap={8}>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>北京</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>广州</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>商务座</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>一等座</div>
                                            </Grid.Item>
                                            <Grid.Item>
                                                <div className={styles['grid-demo-item-block']}>二等座</div>
                                            </Grid.Item>
                                        </Grid>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>一等座</div>
                                        </Grid.Item>
                                        <Grid.Item>
                                            <div className={styles['grid-demo-item-block']}>二等座</div>
                                        </Grid.Item>
                                    </Grid>


                                </Collapse.Panel>

                            </Collapse>
                            <Grid columns={3} gap={8}>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>北京</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>广州</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>{item.date}</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>商务座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>一等座</div>
                                </Grid.Item>
                                <Grid.Item>
                                    <div className={styles['grid-demo-item-block']}>二等座</div>
                                </Grid.Item>
                            </Grid>

                        </div>
                    })
                }
                <InfiniteScroll loadMore={getlistt} hasMore={hasMore} />
            </div>

        </div>
    )
}

export default List
